<template>
    <el-menu :default-active="state.navPath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <!-- 首页 -->
        <el-menu-item index="/home/estateManagement/first" @click="goRouter('/home/estateManagement/first')">
            <el-icon><i class="iconfont icon-shouye"></i></el-icon>
            <span>首页</span>
        </el-menu-item>
        <!-- 人员管理 -->
        <el-sub-menu index="2">
            <template #title>
                <el-icon>
                    <i class="iconfont icon-renyuan-05" style="font-size: 18px;"></i>
                </el-icon>
                <span>人员管理</span>
            </template>
            <el-menu-item index="/home/estateManagement/residentCertification" @click="goRouter('/home/estateManagement/residentCertification')">住户认证管理</el-menu-item>
        </el-sub-menu>
        <!-- 房屋管理 -->
        <el-sub-menu index="3">
            <template #title>
                <el-icon>
                    <i class="iconfont icon-fangwufangchan" style="font-size: 18px;"></i>
                </el-icon>
                <span>房屋管理</span>
            </template>
            <el-menu-item index="/home/estateManagement/housingResources" @click="goRouter('/home/estateManagement/housingResources')">房源管理</el-menu-item>
            <el-menu-item index="/home/estateManagement/housingArchives" @click="goRouter('/home/estateManagement/housingArchives')">房屋档案</el-menu-item>
        </el-sub-menu>
        <!-- 物业服务 -->
        <el-sub-menu index="4">
            <template #title>
                <el-icon>
                    <i class="iconfont icon-rexianfuwufuwu" style="font-size: 18px;"></i>
                </el-icon>
                <span>物业管理</span>
            </template>
            <el-menu-item index="/home/estateManagement/examine" @click="goRouter('/home/estateManagement/examine')">业主审核</el-menu-item>
            <!-- <el-menu-item index="6-2" @click="goRouter('')">item two</el-menu-item> -->
        </el-sub-menu>
        <!-- 通用配置 -->
        <el-sub-menu index="5">
            <template #title>
                <el-icon>
                    <i class="iconfont icon-shezhi" style="font-size: 18px;"></i>
                </el-icon>
                <span>通用配置</span>
            </template>
            <el-menu-item index="/home/estateManagement/user" @click="goRouter('/home/estateManagement/user')">个人信息</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script>
import router from '@/router'
import { onMounted, reactive } from 'vue'

export default {
    setup() {
        const state = reactive({
            navPath:''
        })
        // 展开menu分菜单触发事件
        const handleOpen = (key,keyPath) => {
            // console.log(key, keyPath)
        }
        // 关闭menu分菜单触发事件
        const handleClose = (key,keyPath) => {
            // console.log(key, keyPath)
        }
        // 点击menu-item触发导航
        const goRouter = (e) => {
            // console.log(e)
            router.push(e)
        }
        // 生命周期函数onMounted
        onMounted(()=>{
            changeNav()
        })
        // 获取当前pathname并改变navItem选中高亮
        const changeNav = () =>{
            // console.log(123)
            // console.log(window.location.pathname)
            state.navPath = window.location.pathname
        }

        return {state,handleOpen,handleClose,goRouter}
    }
}
</script>

<style lang="less" scoped>

</style>